<template>
	<view class="bg"></view>
	<view class="" :style="{height: menuTopHeight + 'px'}"></view>
	<view class="menu-box" :style="{height: menuHeight + 'px'}">
		<u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
		<view class="navigate-title">药品货庄</view>
	</view>
	<!-- 搜索 -->
	<view class="container">
		<view class="search-box">
			<u-search placeholder="搜索药品" v-model="keyword" :showAction="false" @search="handleSearch"></u-search>
			<view class="" style="margin-left: 20rpx;">
				<u-image width="80rpx" height="80rpx" src="/static/images/a2.png" @click="showPhone = true"></u-image>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="swiper-box">
			<u-swiper height="262rpx" :list="swiperList"></u-swiper>
		</view>
		<!-- 金刚区 -->
		<view class="navigate-box">
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(item, i) in navigateList" :key="i">
					<view class="item">
						<u-image radius="50%" width="110rpx" height="110rpx" src="/static/logo.png"></u-image>
						<view class="name">{{item.name}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
	
	
	<!-- 推荐 -->
	<view class="content-wrap">
		<view class="suggest-box">
			<view class="tabs">
				<u-tabs itemStyle="height: 100rpx;width: 50%;font-size: 30rpx;'" lineColor="#5780EF"
					activeStyle="color: #5780EF;" inactiveStyle="color: #606672;" :current="current" :list="tabsList"
					@click="tabsChange"></u-tabs>
			</view>
			<scroll-view scroll-x="true" class="suggest-scroll">
				<view class="scroll-list">
					<view class="commodity-item" v-for="(item, i) in 10" :key="i" @tap="goStoreDetail">
						<view class="img-box">
							<u-image width="220rpx" height="200rpx" src="/static/logo.png"></u-image>
						</view>
						<view class="content-box">
							<view class="title">四川爱媛3四川爱媛3四川爱媛38</view>
							<view class="price-box">
								<view class="price">￥139.9</view>
								<view class="icon-box">
									<u-image width="44rpx" height="44rpx" src="/static/images/a63.png"></u-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 九宫格 -->
		<view class="grid-wrap">
			<view class="title-box">
				<u-image width="34rpx" height="30rpx" src="/static/images/a64.png"></u-image>
				<view class="title">防积食助消化</view>
				<u-image width="34rpx" height="30rpx" src="/static/images/a64.png"></u-image>
			</view>
			<u-grid :border="false" col="3" @click="goStoreDetail">
				<u-grid-item v-for="(item, i) in 9" :key="i">
					<view class="commodity-item grid-bottom">
						<view class="img-box">
							<u-image width="220rpx" height="200rpx" src="/static/logo.png"></u-image>
						</view>
						<view class="content-box">
							<view class="title">四川爱媛3四川爱媛3四川爱媛38</view>
							<view class="price-box">
								<view class="price">￥139.9</view>
								<view class="icon-box">
									<u-image width="44rpx" height="44rpx" src="/static/images/a63.png"></u-image>
								</view>
							</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
	
	<!-- 购物车图标 -->
	<view class="car-icon-fixed" @tap="goStoreCar">
		<u-image width="110rpx" height="110rpx" src="/static/images/a65.png"></u-image>
	</view>

	<!-- 客服电话 -->
	<u-action-sheet round="30rpx" :show="showPhone" :actions="actions" title="" description="" @close="showPhone = false"
		@select="callConfirm">
	</u-action-sheet>
</template>

<script setup>
    import {ref, reactive, readonly} from "vue"
    import {onLoad, onShow} from '@dcloudio/uni-app'
	import {useHeight} from '@/hooks/useMenuHeight'
	const {menuHeight, menuTopHeight} = useHeight()
    import {getBanner, getHomeDepartments, getNotice} from "@/api/cms"
    import {getRecommend} from "@/api/doctor"
    import {checkAndFixUrl} from "@/utils/tool"
    import { useHospitalStore } from '@/store';
    import n4 from '@/static/images/a7.png'
	
	const navigateList = ref([
		{name: '糕点'},
		{name: '茶饮'},
		{name: '糖果'},
		{name: '衣养'},
		{name: '医养'},
		{name: '滋补'},
	])

    // 医院store
    // const hospitalStore = useHospitalStore()
    const hospitalStore = ref({
		photo: '',
		name: '浑南区诊室',
		address: '青年大街',
		hotline: '17640101265'
	})
	
	// tab切换
	const current = ref(0)
	const tabsList = ref([{
			name: '新品上新'
		},
		{
			name: '爆款热卖'
		}
	])
	const tabsChange = e => {
		current.value = e
	}
	

	const keyword = ref('')
	// 轮播图
	const swiperList = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	])

    // 医生推荐
    const recommendDoctorList = ref([
		{ avatar: '', name: '王医生', id: 1, job_title: '主任医师', department_name: '中医内科', desc: '描述' }
	])

    onLoad((evt) => {
        console.log('on load')
    })

    onShow( () => {
        console.log('on show')
        // handleGetBanner()
        // handleGetHomeDepartments()
    })
    // 获取banner.
    const handleGetBanner = async () => {
        const result = await getBanner({})
        if (result.code === 1) {
            swiperList.value = result.data.map(item => {
                return checkAndFixUrl(item.banner)
            })
        }
    }
    // 首页分类.
    const handleGetHomeDepartments = async () => {
        const result = await getHomeDepartments({})
        if (result.code === 1) {
            let arr = result.data.map(item => {
                return {
                    ...item,
                    name: item.name,
                    icon: checkAndFixUrl(item?.icon ?? ''),
                    child_exists: item.child_exists
                }
            })
            arr.push({
                name: '取药提醒',
                href: '/mine/dispensary/list',
                icon: n4
            })
        }
    }
	// 客服
	const showPhone = ref(false)
	const actions = ref([{
			name: '一键拨打：400-8823-823',
			isCall: true
		},
		{
			name: '取消',
			isCall: false
		},
	])
	// 拨打电话
	const callConfirm = e => {
		console.log(e);
		if (e.isCall) {
			uni.makePhoneCall({
				phoneNumber: '123456'
			})
		}
	}

    // 搜索
    const handleSearch = () => {
        console.log(keyword.value)
        uni.navigateTo({
            url: `/mine/reservation/reservation?keyword=${keyword.value}`
        })
    }
	// 商品详情
	const goStoreDetail = () => {
		uni.navigateTo({
			url: '/mine/drug-store/detail'
		})
	}
	// 购物车
	const goStoreCar = () => {
		uni.navigateTo({
			url: '/mine/drug-store/car'
		})
	}
	// 返回
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.menu-box {
		padding-left: 26rpx;
		color: #fff;
		display: flex;
		align-items: center;
		.navigate-title {
			color: #fff;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-left: 18rpx;
		}
	}
	.bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 483rpx;
		background: linear-gradient(180deg, #3165DE 0%, #3165DE 31%, rgba(255, 255, 255, 0.52) 100%);
		border-radius: 0rpx 0rpx 80rpx 80rpx;
		z-index: -1;
	}

	.container {
		padding: 28rpx 24rpx 0;
	}

	.search-box {
		display: flex;
		align-items: center;
	}

	.swiper-box {
		margin-top: 20rpx;
	}
	
	.navigate-box {
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 0 1rpx;
		// padding: 44rpx 10rpx 32rpx;
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.name {
				font-size: 30rpx;
				color: #3B6CDF;
				margin-left: 12rpx;
			}
		}
	}

	.content-wrap {
		padding: 0 26rpx 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.commodity-item {
			position: relative;
			width: 220rpx;
			// height: 330rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-right: 20rpx;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(102,102,102,0.16);
			z-index: 99;
			.content-box {
				padding: 8rpx 8rpx 15rpx;
				.title {
					color: #666666;
					@include over-ellip();
					margin-bottom: 12rpx;
				}
				.price-box {
					@include between(100%);
					.price {
						font-size: 28rpx;
						color: #F55726;
					}
					.icon-box {
						@include center(44rpx, 44rpx);
						background: #516DDB;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.suggest-box {
		position: relative;
		margin-top: 30rpx;
		.tabs {
			border-bottom: 1rpx solid #DFE5F6;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
		}

		.suggest-scroll {
			white-space: nowrap;
			height: 330rpx;
			position: relative;
			width: 100%;
			display: flex;
			.scroll-list {
				display: flex;
				position: absolute;
				left: 0;
				top: 14rpx;
				
			}
		}
	}
	.grid-wrap {
		margin-top: 30rpx;
		padding-top: 34rpx;
		border-top: 1rpx solid #DFE5F6;
		.title-box {
			@include center();
			color: #516DDB;
			font-size: 36rpx;
			margin-bottom: 30rpx;
			.title {
				margin: 0 48rpx;
			}
		}
		.grid-bottom {
			margin-bottom: 30rpx;
		}
	}
	
	.car-icon-fixed {
		position: fixed;
		right: 26rpx;
		bottom: 210rpx;
		z-index: 999;
	}
</style>
